import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { useDispatch } from '@/redux/index.ts'
import { setToken } from '@/redux/modules/user.ts'
import { loginApi } from '@/api/modules/login.ts'
import { BUILD_PATH, HOME_PATH } from '@/config/index.ts'
import { notification, message } from '@/hooks/useMessage.ts'
import usePermissions from '@/hooks/usePermissions.ts'
import './index.scss'
import Top from './components/Top'
import Item1 from './components/item1'
import BottonImage from '@/assets/images/dizuo.png'
import UserImage from '@/assets/images/icon_user.png'
import PasswordImage from '@/assets/images/icon_password.png'
import { BorderBox8 } from '@jiaminghi/data-view-react'
import 'animate.css'

const LoginPage: React.FC = () => {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  const { initPermissions } = usePermissions()

  const [username, setUsername] = useState<string>('')
  const [password, setPassword] = useState<string>('')

  const userLogin = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault()
    try {
      message.open({
        key: 'login-loading',
        type: 'loading',
        content: '正在登录，请稍后...'
      })
      await new Promise((resolve: any) => {
        setTimeout(function () {
          message.destroy('login-loading')
          resolve(true)
        }, 2500)
      })

      // 1.登录获取token,并进行持久化存储
      const loginRes = await loginApi({ username, password })
      dispatch(setToken(loginRes.token))

      // 2.获取用户的菜单列表
      await initPermissions(loginRes.token)

      // 3.跳转首页
      notification.success({
        message: '登录成功',
        description: '欢迎回来，玛卡巴卡！',
        duration: 2
      })
      navigate(BUILD_PATH)
    } catch (error) {
      console.log(error)
    }
  }

  return (
    <div className="loginBody">
      <Top title="智能消防系统" />
      <div className="centerBody wow animate__animated animate__fadeInDown">
        <BorderBox8>
          <div className="centerBodyDesc wow animate__animated animate__fadeInRight">欢迎登录</div>
          <div className="centerBodyInner">
            <div className="centerBodyInnerl">
              <div className="map">
                <Item1 />
              </div>
              <img
                className="dizuo wow animate__animated animate__bounceIn"
                data-wow-delay="1s"
                src={BottonImage}
                alt=""
              />
            </div>
            <div className="centerBodyInnerr">
              <div className="formInput wow animate__animated animate__fadeInLeft" data-wow-delay="1s">
                <div className="icon">
                  <img src={UserImage} alt="" />
                </div>
                <input
                  type="text"
                  placeholder="输入用户名"
                  value={username}
                  onChange={(e) => setUsername(e.target.value)}
                />
              </div>
              <div className="formInput wow animate__animated animate__fadeInRight" data-wow-delay="1.5s">
                <div className="icon">
                  <img src={PasswordImage} alt="" />
                </div>
                <input
                  type="password"
                  placeholder="输入密码"
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                />
              </div>
              <div
                className="loginBut wow animate__animated animate__fadeInUp cur"
                onClick={(e) => {
                  userLogin(e as any)
                }}
                data-wow-delay="2s"
              >
                <span>安全登录</span>
              </div>
            </div>
          </div>
        </BorderBox8>
      </div>
    </div>
  )
}

export default LoginPage
